<template>
	<view class="frame">
		<cz-loading-page :loading="loading"></cz-loading-page>
		<navbarVue icon="arrow-left"></navbarVue>
		
		<view class="nav-top">
			<view class="nav-left">
				<image :src="images.avatar_1" class="left-arc" alt="">
				<view class="left-text">当前：
					<span class="red" v-if="showMoney">{{ income.today }}</span> 
					<view v-else>
						<goldVue :money="roundToDecimals(income.today)"></goldVue>
					</view>
				</view>
			</view>
			<view class="nav-right">
				<view class="tip">点击自定义主题</view>
				<image class="image" :src="images.zdy_zt" mode="heightFix" alt="">
			</view>
		</view>
		<view class="nav-2">
			<view class="nav-2-left">
				<view class="nav-2-icon">
					<image :src="weekImages[todayDate.week]" alt="">
				</view>
				<view >
					<span class="red" v-if="showMoney">
						{{ roundToDecimals(income.week + income.today) }}
					</span>
					<view v-else>
						<goldVue :money="roundToDecimals(income.week + income.today)"></goldVue>
					</view>
				</view>
			</view>
			<view class="nav-2-right">
				<view >
					<span class="red" v-if="showMoney">
						{{ roundToDecimals(income.month + income.today) }}
					</span>
					<view v-else>
						<goldVue :money="roundToDecimals(income.month + income.today)"></goldVue>
					</view>
				</view>
				<view class="nav-2-icon">
					<image :src="monthImages[new Date().getMonth() + 1]" alt="">
				</view>
			</view>
		</view>
		<view class="nav-3">
			<image :src="images.av3_left_bg" class="av3-left-bg" mode="widthFix" alt="">
				<image :src="images.av3_right_bg" class="av3-right-bg" mode="widthFix" alt="">
					<view class="nav-3-content">
						<image :src="images.av3_bg" class="nav-3-bg" alt="">
							<view class="go-off-work">
								<template v-if="!isWeekEnd">
									<template v-if="workType === 0">
										<view class="date-card">{{ hour }}</view>
										<view class="date-gap">:</view>
										<view class="date-card">{{ minute }}</view>
										<view class="date-gap">:</view>
										<view class="date-card">{{ second }}</view>
									</template>
									<template v-else>
										{{ workDict[workType] }}
									</template>
								</template>
								<template v-else>
									周末愉快
								</template>
							</view>
							<view class="nav-3-ren-frame">
								<view class="ren-frame">
									<image :src="images.ren" mode="heightFix" alt="">
								</view>
							</view>
					</view>
		</view>

		<view class="card-frame">
			<view class="card-item">
				<view class="all-avatar">
					<image :src="images.icon_1" alt="">
				</view>
				<view class="card-item-text">
					<view>今日工作</view>
					<view style="color:#95a3b0;">{{ formatSecondsToChinese(workInfo.workingTime) }}</view>
				</view>
			</view>
			<view class="card-item">
				<view class="all-avatar">
					<image :src="images.icon_2" alt="">
				</view>
				<view class="card-item-text">
					<view>本周工作</view>
					<view style="color:#95a3b0;">
						{{ formatSecondsToChinese(workInfo.workingTime + todayDate.week * workInfo.totalTime) }}</view>
				</view>
			</view>
			<view class="card-item2" style="background-color:#fdf4e5;">
				<image class="now-year-icon" :src="yearImages[2025]" alt="">
					<view>今年</view>
					<view class="year-date">
						{{ formatSecondsToChinese(workInfo.workingTime + todayDate.year * workInfo.totalTime) }}</view>
					<view class="year-wages">
						<span v-if="showMoney">
							{{ roundToDecimals(income.year + income.today) }}
						</span>
						<view v-else>
							<goldVue :money="roundToDecimals(income.year + income.today)"></goldVue>
						</view>
					</view>
			</view>
			<view class="card-item2" style="background-color:#dbf3fd;">
				<image class="now-year-icon" :src="images.jk" alt="">
					<view>监控</view>
					<view class="year-date">点击刷新</view>
					<view class="year-mo_yu">
						<span>当前摸鱼人数</span>
						<span>123</span>
					</view>
			</view>
		</view>
		<view class="card-frame2">
			<image class="av3-bottom-bg" :src="images.av3_bottom_bg" mode="widthFix" alt="">
				<view class="card-frame2-left">
					<view class="card-frame2-left-item">
						<view class="all-avatar">
							<image :src="images.icon_3" alt="">
						</view>
						<view class="card-item-text">
							<view>距离非工作日假期</view>
							<view style="color:#95a3b0;">最近的假期国庆节96天</view>
						</view>
					</view>
					<view class="card-frame2-left-item">
						<view class="all-avatar">
							<image :src="images.icon_4" alt="">
						</view>
						<view class="card-item-text">
							<view>你已入职635天</view>
							<view style="color:#95a3b0;">距离发薪日期3天</view>
						</view>
					</view>
				</view>
				<view class="card-frame2-right">
					<view style="height: 34px;">
						<view>本月还需工作</view>
						<view class="card-frame2-right-day">{{ todayDate.month - todayDate.monthIng }}天</view>
					</view>
					<view class="card-frame2-image-frame">
						<image :src="images.ren_2" mode="heightFix" alt="">
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import homeMethods from "./methods.js";
	import homeData from './data.js';
	import navbarVue from "./navbar.vue";
	import goldVue from "../../components/gold/gold.vue";

	export default {
		components: {
			navbarVue,
			goldVue
		},
		data() {
			return {
				loading: true,
				// 图片资源
				images: {
					av3_bg: 'https://crazy3.top/jx3/images/wages/av3-bg.png', // 头像3
					av3_left_bg: 'https://crazy3.top/jx3/images/wages/av3-left-bg.png', // 左头像
					av3_right_bg: 'https://crazy3.top/jx3/images/wages/av3-right-bg.png', // 右头像
					av3_bottom_bg: 'https://crazy3.top/jx3/images/wages/av3-bottom-bg.png', // 下头像
					avatar_1: 'https://crazy3.top/jx3/images/wages/avatar_1.png', // 我的头像
					ren: 'https://crazy3.top/jx3/images/wages/ren.png', // 中间小人
					ren_2: 'https://crazy3.top/jx3/images/wages/ren_2.png', // 右下角小人
					icon_1: 'https://crazy3.top/jx3/images/wages/icon_1.png', // 图标1
					icon_2: 'https://crazy3.top/jx3/images/wages/icon_2.png', // 图标2
					icon_3: 'https://crazy3.top/jx3/images/wages/icon_3.png', // 图标3
					icon_4: 'https://crazy3.top/jx3/images/wages/icon_4.png', // 图标4
					jk: 'https://crazy3.top/jx3/images/wages/jk.png', // 监控
					zdy_zt: 'https://crazy3.top/jx3/images/wages/zdy_zt.png', // 自定义
				},

				// 时间相关
				hour: '00',
				minute: '00',
				second: '00',

				// 收入数据
				income: {
					today: 0,
					week: 0,
					month: 0,
					year: 0,
				},

				// 工作时间设置
				workingHours: [{
						startTime: '08:30',
						endTime: '12:00'
					},
					{
						startTime: '13:30',
						endTime: '18:00'
					},
				],

				// 工作信息
				workInfo: {
					totalTime: 0,
					workingTime: 0,
					wages: 8000,
					dailyWage: 0,
					workDay: 5,
					saturday: false,
					sunday: false,
				},

				// 其他状态
				weekNum: new Date().getDay() === 0 ? 7 : new Date().getDay(),
				workType: -1,
				workDict: {
					0: '工作中!',
					1: '准备上班!',
					2: '下班咯!',
					3: '休息中,请勿打扰哦!',
				},
				isWeekEnd: false,
				todayDate: {},
				weekImages: homeData.weekImage,
				monthImages: homeData.monthImage,
				yearImages: homeData.yearImage,

				// 定时器相关
				timer: null,
				
				// 显示钱还是金砖
				showMoney: false,
			};
		},
		onLoad() {
			this.$api.get('/jx3/wages/getWagesDetail').then(res => {
				console.log(res)
				if(res.data) {
					
				}else {}
				this.loading = false
			})
		},
		methods: {
			roundToDecimals(val) {
				return homeMethods.roundToDecimals(val)
			},
			formatSecondsToChinese(val) {
				return homeMethods.formatSecondsToChinese(val)
			},
			// 每秒更新的函数
			Fn() {
				this.workInfo.workingTime = homeMethods.calculateWorkedSeconds(this.workingHours);
				this.income.today = homeMethods.roundToDecimals(
					this.workInfo.workingTime * (this.workInfo.dailyWage / this.workInfo.totalTime)
				);

				const date = homeMethods.convertSeconds(this.workInfo.totalTime - this.workInfo.workingTime);
				this.hour = date.hours;
				this.minute = date.minutes;
				this.second = date.seconds;
				this.workType = homeMethods.getWorkStatus(this.workingHours);
			},

			// 动画循环
			loop() {
				// 清除之前的定时器防止多重触发
				if (this.timer) clearInterval(this.timer);

				this.timer = setInterval(() => {
					this.Fn();
				}, 1000);
			},

			// 初始化函数
			init() {
				// 计算总工作时长
				this.workInfo.totalTime = this.workingHours.reduce((total, item) => {
					return total + (homeMethods.timeToSeconds(item.endTime) - homeMethods.timeToSeconds(item
						.startTime));
				}, 0);

				// 计算日薪
				this.workInfo.dailyWage = Number(this.workInfo.wages / this.todayDate.month);

				if (homeMethods.isWorkingDayToday([], this.workInfo)) {
					this.income.week = homeMethods.roundToDecimals(this.todayDate.week * this.workInfo.dailyWage);
					this.income.month = homeMethods.roundToDecimals((this.todayDate.monthIng - 1) * this.workInfo
						.dailyWage);
					this.income.year = homeMethods.roundToDecimals((this.todayDate.year - 2) * this.workInfo.dailyWage);
				} else {
					this.income.week = homeMethods.roundToDecimals(this.todayDate.week * this.workInfo.dailyWage);
					this.income.month = homeMethods.roundToDecimals(this.todayDate.monthIng * this.workInfo.dailyWage);
					this.income.year = homeMethods.roundToDecimals((this.todayDate.year - 3) * this.workInfo.dailyWage);
				}

				// 启动循环
				if (!this.isWeekEnd) {
					this.Fn();
					this.loop();
				}
			},

			// 跳转方法
			postMessageWx() {
				this.$router.push('/test');
				// 微信相关代码
				// wx.miniProgram.postMessage({ data: {foo: 'bar11'} })
				// wx.miniProgram.navigateTo({
				//   url: '/pages/getMessage/getMessage?foo=bar11',
				// })
			}
		},

		mounted() {
			// 初始化日期数据
			this.isWeekEnd = this.weekNum > this.workInfo.workDay;
			this.todayDate = {
				day: new Date().getDate(),
				week: this.weekNum <= this.workInfo.workDay ? this.weekNum - 1 : this.workInfo.workDay,
				month: homeMethods.getWorkingDaysUntilToday([], this.workInfo),
				monthIng: homeMethods.getWorkDaysUntilToday([], this.workInfo),
				year: homeMethods.getWorkingYearDaysUntilToday([], this.workInfo),
			};

			this.init();
		},

		beforeDestroy() {
			// 清除定时器防止内存泄漏
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	};
</script>

<style scoped lang="scss">
	.frame {
		min-height: 100vh;
		overflow: hidden;
		background: linear-gradient(to bottom, #6fc8ff, #fff);
	}

	.nav-top {
		padding: 20px 30px;
		display: flex;
		justify-content: space-between;

		.nav-right {
			height: 44px;
			display: flex;
			align-items: center;
			position: relative;

			.tip {
				position: absolute;
				bottom: 100%;
				right: 0;
				white-space: nowrap;
				font-size: 13px;
				font-weight: bold;
				color: #fff;
			}

			.image {
				width: 44px;
				height: 44px;
				border-radius: 8px;
				background-color: red;
			}
		}

		.nav-left {
			height: 44px;
			background-color: #c1e7f9;
			display: flex;
			align-items: center;
			width: 100px;
			position: relative;
			border-radius: 999px;

			.left-arc {
				position: absolute;
				width: 50px;
				height: 50px;
				background-color: #fff;
				border-radius: 50%;
				border: 2px solid #fff;
			}

			.left-text {
				position: absolute;
				left: 58px;
				background-color: #fff;
				height: 100%;
				line-height: 44px;
				padding: 0 20px;
				border-radius: 999px;
				font-weight: bold;
				white-space: nowrap;
				display: flex;
			}
		}
	}

	.nav-2 {
		margin: 0 30px 20px 30px;
		height: 44px;
		display: flex;
		font-size: 13px;
		font-weight: bold;

		.nav-2-left {
			flex: 3;
			height: 100%;
			background-color: #fefff9;
			padding: 0 10px;
			display: flex;
			align-items: center;
			border-radius: 999px 500px 500px 999px;
			justify-content: space-between;
		}

		.nav-2-icon {
			width: 34px;
			height: 34px;
			background-color: red;
			border-radius: 999px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.nav-2-right {
			flex: 3;
			height: 100%;
			background-color: #fefff9;
			margin-left: 5px;
			padding: 0 10px;
			display: flex;
			align-items: center;
			border-radius: 500px 999px 999px 500px;
			justify-content: space-between;

			.nav-2-right-icon {
				width: 34px;
				height: 34px;
				background-color: red;
				border-radius: 999px;
			}
		}
	}

	.nav-3 {
		position: relative;

		.av3-left-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 50px;
		}

		.av3-right-bg {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 50px;
		}

		.nav-3-content {
			width: 60vw;
			height: 60vw;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 50%;
			box-shadow: 0 0 5px -1px #999;
			position: relative;

			.nav-3-bg {
				position: absolute;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.go-off-work {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 18px;
				font-weight: bold;
				height: 40px;
				padding-top: 25px;

				.date-card {
					width: 30px;
					height: 100%;
					background-color: #4d85ff;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 5px;
					margin: 0 5px;
				}
			}

			.nav-3-ren-frame {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 50%;
				overflow: hidden;

				.ren-frame {
					margin-top: 70px;
					height: calc(100% - 70px);
					display: flex;
					justify-content: center;

					image {
						height: 100%;
					}
				}
			}
		}
	}

	.all-avatar {
		width: 44px;
		height: 44px;
		border-radius: 8px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.card-frame {
		margin: 20px 30px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;

		.card-item {
			height: 44px;
			background-color: #fff;
			border-radius: 10px;
			padding: 8px;
			display: flex;

			.card-item-text {
				display: flex;
				justify-content: center;
				flex-direction: column;
				font-size: 12px;
				padding-left: 7.5px;
				font-weight: bold;
			}
		}

		.card-item2 {
			height: calc(100px - 32px);
			background-color: #fff;
			border-radius: 10px;
			padding: 16px;
			box-shadow: 0 0 3px -1px #bbb;
			font-size: 14px;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			color: #a87b47;
			position: relative;

			.now-year-icon {
				position: absolute;
				width: 34px;
				height: 34px;
				border-radius: 4px;
				top: 8px;
				right: 8px;
			}

			.year-date {
				font-size: 12px;
				color: #95a3b0;
			}

			.year-wages {
				font-size: 20px;
				white-space: nowrap;
				color: #fe9a5e;
			}

			.year-mo_yu {
				color: #333;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.card-frame2 {
		display: flex;
		margin: 0 30px 20px 30px;
		position: relative;

		.av3-bottom-bg {
			position: absolute;
			right: -28px;
			top: -20px;
			width: 50px;
			z-index: 1;
		}

		.card-frame2-left {
			flex: 4;
			height: calc(103px + 32px);
			margin-right: 7.5px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.card-frame2-left-item {
				height: 44px;
				width: calc(100% - 16px);
				background-color: #fff;
				border-radius: 10px;
				padding: 8px;
				box-shadow: 0 0 3px -1px #bbb;
				display: flex;

				.card-item-text {
					display: flex;
					justify-content: center;
					flex-direction: column;
					font-size: 12px;
					padding-left: 7.5px;
					font-weight: bold;
				}
			}
		}

		.card-frame2-right {
			flex: 2;
			height: calc(103px + 16px);
			background-color: #fdf8e5;
			border-radius: 10px;
			margin-left: 7.5px;
			padding: 8px;
			box-shadow: 0 0 3px -1px #bbb;
			text-align: center;
			font-size: 13px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			position: relative;
			z-index: 2;

			.card-frame2-image-frame {
				height: calc(100% - 34px + 8px);

				image {
					height: 100%;
				}
			}

			.card-frame2-right-day {
				font-size: 16px;
				color: #fc7b4b;
				font-weight: bold;
			}
		}
	}
</style>